<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->

        <img v-if="avatar"  :src="avatar"/>
      <img v-else src="../../../assets/images/avatar.jpg" alt="" />

      <!-- 按钮区域 -->
      <div class="btn-box">
          <!-- accept用来限制用户选择的文件类型,因为文件选择器不好看,所以把他隐藏,用选择图片的button按钮来触发 -->
          <input ref="fileTnp" type="file"
                 style="display:none"
                 accept="image/*"
                 @change="hImgChange"
           >
        <el-button type="primary" icon="el-icon-plus" @click="$refs.fileTnp.click() " >选择图片</el-button>
        <el-button type="success" icon="el-icon-upload" :disabled="!avatar"  @click="uploadAvatar">上传头像</el-button>

      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UserAvatar',
  data () {
    return {
      avatar: ''
    }
  },
  methods: {

    hImgChange (e) {
      //  获取用户选择的文件列表（伪数组）
      const file = e.target.files[0]
      // img里面的src属性只能接收url或base64格式的文件
      if (file) {
        // 创建对象FileReader,这文件阅读器对象允许 Web 应用程序异步读取存储在...上的文件（或原始数据缓冲区）的内容。
        const fr = new FileReader()
        // 调用readAsDataURL方法把文件转换成baes64字符串
        fr.readAsDataURL(file)

        fr.onload = (e) => {
          // e.target.result打印结果就是当前图片转化成的baes64字符串
        // 让avatar等于e.target.result即可拿到渲染出图片
          this.avatar = e.target.result
          console.log(e.target)
        }
      } else {
        this.avatar = ''
      }
    },
    // 发送请求,上传头像
    async  uploadAvatar () {
      const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.avatar })
      // 提醒用户
      this.$message.success(res.message)
      // 更新用户信息,调用函数
      this.$store.dispatch('user/getUserInfo')
    }
  }

}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}

.avatar {

  object-fit: cover;
}
</style>
